<template>
    <div>
        <div class="searchHeader">
            <el-input placeholder="请输入用户名称或昵称" size="small" v-model="nameCateKeyWords" class="cateKeyWords"></el-input>
            <el-button type="primary" icon="el-icon-search" size="small" @click="initUserInfo">搜索用户</el-button>
        </div>

        <div>
            <el-card class="box-card" v-for="(item,i) in userDatas">
                <div slot="header" class="clearfix">
                    <span style="color: #409EFF">用户昵称 : {{item.nickname}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="delUser(i)" :v-model="item.id">删除用户</el-button>
                </div>
                <div class="text item">
                    <p>用户名称 : {{item.username}}</p>
                    <p v-if="item.gender">性别 : 女</p>
                    <p v-if="!item.gender">性别 : 男</p>
                    <p>加入时间 : {{item.joinTime}}</p>
                    <p>
                        是否可用 :
                        <el-switch
                                @change="enabled(item.id,item.enabled)"
                                v-model="item.enabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </p>
                    <p>
                        是否锁定 :
                        <el-switch
                                @change="locked(item.id,item.nonLocked)"
                                v-model="item.nonLocked"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </p>
                    <p>
                        角色 :
                        <span v-for="(role,i) in item.roles" style="margin-right: 8px">{{role.rnameZh}}</span>
                    </p>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "UserManage",
        data(){
            return{
                nameCateKeyWords:'',
                userDatas:[

                ],
                loginUserInfo:JSON.parse(window.sessionStorage.getItem('loginUser')),
                updateData1:{
                    id:'',
                    enabled:null
                },
                updateData2:{
                    id:'',
                    nonLocked:null
                }
            }
        },
        methods:{
            initUserInfo(){
                this.$getRequest('/user/getUsers?name='+this.nameCateKeyWords).then(resp=>{
                    if(resp){
                        this.userDatas=resp;
                    }
                })
            },
            delUser(index){
                if(this.loginUserInfo.id != this.userDatas[index].id){
                    this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$deleteRequest('/user/delUser/'+this.userDatas[index].id).then(resp=>{
                            if(resp){
                                this.initUserInfo();
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    })
                }else{
                    this.$message.warning("不能删除当前登录用户！");
                }
            },
            enabled(id,enabled){
                this.updateData1.id=id;
                this.updateData1.enabled=enabled;
                this.$putRequest("/user/updateStatus",this.updateData1).then(resp=>{
                    this.initUserInfo();
                })
            },
            locked(id,locked){
                this.updateData2.id=id;
                this.updateData2.nonLocked=locked;
                this.$putRequest("/user/updateStatus",this.updateData2).then(resp=>{
                    this.initUserInfo();
                })
            }
        },
        mounted() {
            this.initUserInfo();
        }
    }
</script>

<style scoped>
    .cateKeyWords{
        width: 300px;
        margin-right: 10px;
    }

    .searchHeader{
        margin: 15px 0;
    }

    .text {
        font-size: 12px;
        color: #409EFF;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 360px;
        display: inline-block;
        margin-right: 8px;
    }
</style>